<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局流</title>
    <style type="text/css">
        section,div{
            background-color: red;
            width: 300px;
            height: 100px;
            /*border: 边框,
            第一个值是边框的宽度.
            第二个值是边框样式,solid:实线;dotted:虚线;double:双实线;等等.
            第三个值值边框的颜色
            */
            border: 5px double blue;
        }


        div{
            /*display:修改元素的默认类型.
            inline-block:行内的块元素.即在行内显示,并且宽高可调.
            block:块元素
            inline:行内元素,宽高不可调
            */            
            display:inline-block;
        }

        a{
            /*行元素 宽高默认,不可调*/
            width: 500px;
            height: 100px;

            /*设置文本的下划线样式
                默认是underline:下划线;
                none:没有;
                overline:文本上的一条线;
                line-through:穿过文本的一条线,删除线;
            */
            text-decoration: none;
        }

        img{
            width:100px;

            /*顶部边框*/
            border-top: 5px solid red;

            /*设置圆角半径*/
            border-radius: 50%;

            border-top-left-radius: 30px;
            /*对某一个角专门设置*/
            border-top-right-radius:50%;
        }
    </style>
</head>
<body>
    <!-- 
        H5的标签元素按照大的分类可以分为:行元素和块元素,
        他们的特点和布局样式都有很大的差异.

        常用的块元素:div,section,p,main,header,footer等等.
        块元素的特点是:
            宽度自动占满一整行,宽高可调.
            并且即使宽度比较小,没有占满一行,后面的区域也会空下来.不允许其他元素占用.
            简单来讲,就是独占一行.所以块元素是从上往下,垂直布局.

        常用的行元素:a,span,strong等等.
        行元素的特点是:
            多个元素共享一行,只有当一行占满时,才考虑换行,即先横向排列,再纵向.
            另外,行元素宽度会根据内容自动计算,并且宽高默认不可调.

        还有一些特殊标签:
        img标签,既可以是行元素,也可以块元素.

        meta标签,link标签,script标签等等.既不属于行元素,也不属于块元素.

        所有的行元素和块元素都可以被重置和互换.
     -->
     <div>这是一个div</div>
     <div>这是第二个div</div>

     <section>这是一个section标签</section>

     <a href="#">超链接1</a>
     <a href="#">超链接2</a>
     <span>这是一个span标签</span>
     <i>这是一个i标签</i>
     <strong>这个一个strong标签</strong>
     <del>这是一个del标签</del>

     <img src="ldh.jpg">
</body>
</html>